<template>
  <div class="pageHead">
    <ul class="navList">
      <li><a href="">首页</a></li> |
      <li><a href="">E讲堂</a></li> |
      <li><a href="">心灵成长</a></li> |
      <li><a href="">生涯规划</a></li> |
      <li><a href="">平台介绍</a></li>
    </ul>
    <ul class="userInfo">
      <li class="left"></li>
      <li class="right">
        <a href="">手机客户端</a>
        <a @mouseover="showLoginBox" @mouseout="hideLoginBox">
          {{userInfo.name}}<i class="el-icon-caret-bottom"></i>
          <div class="login" :style="userLoginBox">
            <ul>
              <li
                v-for="(item,index) in list"
                :key="index"
                @click="loginBoxJump(item)">
                <span>{{item.name}}</span>
              </li>
            </ul>
          </div>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
    import Cookies from 'js-cookie'
    export default {
        name: "pageHead",
        props: {
            list: {
                type: Array,
                default: function() {
                    return [
                        {name: '我的账户', url: '/user-center', type: 'account'},
                        {name: '我的消息', url: '/user-center', type: 'news'},
                        {name: '我的订单', url: '/user-center', type: 'order'},
                        {name: '退出', url: '', type: 'exit'},
                    ] //这样可以指定默认的值
                }
            }
        },
        data() {
            return {
                userInfo: {},
                // 用户登录盒子
                userLoginBox: {
                    height: '0'
                },
            }
        },
        created() {
            this.getUserInfo();  // 获取用户信息
        },
        methods: {
            // 获取用户信息
            getUserInfo() {
                //  请求
                const user = {
                    name: '李恩童',
                };
                this.userInfo = user;
            },
            showLoginBox() {
                this.userLoginBox = { height: '125px' }
            },
            hideLoginBox() {
                this.userLoginBox = { height: '0' }
            },
            // 跳转用户中心页面
            loginBoxJump(item) {
                if(item.url) {
                    let routeUrl = this.$router.resolve({
                        path: item.url,
                        query: {
                            type: item.type
                        }
                    });
                    window.open(routeUrl.href, '_blank');
                }else{
                    if(item.type==='exit') {
                        Cookies.remove('token');
                        localStorage.removeItem('userInfo');
                        this.$router.push({
                            path: '/login',
                            query: {
                                sId: 2,
                                fromUrl: '',
                            }
                        })
                    }
                }
            },
        }
    }
</script>

<style scoped lang="scss">
  @import '../../../styles/common.scss';
  .pageHead{
    background-color: #f2f2f2;
    display: flex;
    justify-content: center;
    ul.navList{
      width: 500px;
      display: flex;
      padding: 4px 0;
      li{
        padding: 0 10px;
        a{
          font-size: 0.6rem;
          color: #444;
        }
        a:hover{
          color: #2e86ff;
        }
      }
    }
    ul.userInfo{
      width: 500px;
      display: flex;
      justify-content: space-between;
      padding: 4px 0;
      li{
        padding-right: 10px;
        a{
          display: inline-block;
          padding-left: 10px;
          cursor: pointer;
          font-size: 0.8rem;
          position: relative;
          line-height: 20px;
          color: #444;
          .login{
            width: 120px;
            position: absolute;
            top: 22px;
            right: 0;
            background-color: #fff;
            transition: all 0.3s;
            overflow: hidden;
            ul{
              border: 1px solid #f1f1f1;
              li{
                height: 20px;
                border-bottom: 1px solid #f1f1f1;
                padding: 5px 12px;
                text-align: center;
                span{
                  font-size: 0.8rem;
                  color: #666;
                }
                span:hover{
                  color: #2e86ff;
                }
              }
            }
          }
        }
      }
    }
  }
</style>